<template>
    <div>
        <q-dialog ref="dialog" @hide="onDialogHide">
            <div class="add-friend bg-white q-dialog-plugin q-pa-sm">
                <div class=" profile-head ">
                    <div class="row">
                        <div class="col">
                            <div class="text-h6"      @click="initTab">
<!--                                <q-tabs-->
<!--                                        inline-label-->
<!--                                        v-model="addTab"-->
<!--                                        class="text-teal"-->
<!--                                >-->
<!--                                    <q-tab name="friend" icon="person_add" label="找好友"/>-->
<!--                                    <q-tab name="group" icon="group_add" label="找群"/>-->
<!--                                </q-tabs>-->

                                <q-btn-toggle
                                        flat
                                        v-model="addTab"
                                        toggle-color="teal"
                                        :options="[
                                                    {label: '找好友', value: 'friend'},
                                                    {label: '找群', value: 'group'}
                                                  ]"/>

                            </div>
                        </div>
                        <div class="col-auto">
                            <q-btn flat round icon="close" @click="onCancelClick"/>
                        </div>
                    </div>
                    <div class="row">
                    </div>

                </div>
                <q-separator spaced/>
                <div class="heAndWi q-pa-sm">
                    <!--                    <div class="row no-wrap q-pa-sm bg-blue-2 rounded-borders">-->
                    <!--                        <span class="text-subtitle2 text-justify text-teal margin-left ">{{addTab-->
                    <!--                            ==='friend'?'发送好友请求':'发送加群请求'}}</span>-->
                    <!--                    </div>-->
                    <div class="row   q-pa-sm rounded-borders margin-top">

                        <q-input outlined clearable rounded dense class="heAndWi" bottom-slots v-model="accountNum" :label="
                        addTab === 'friend'?'账号/昵称':'群号/群名称'" counter
                                 maxlength="12"
                                 :rules="[val => !!val || '不能为空!']">
                            <template v-slot:prepend>
                                <q-icon :name="addTab === 'friend'?'person_add':'group_add'"/>
                            </template>
                            <template v-slot:append>
                                <q-btn round dense flat icon="search" :disable="accountNum" @click="searchAccount"/>
                            </template>
                        </q-input>
                    </div>
                    <div class="row profile-body " v-if="showAccountList">
                        <q-scroll-area class="profile-scroll-add q-pa-sm " :thumb-style="thumbStyle">
                            <div >
                                <q-list bordered  >
                                    <q-item v-for="item in searchList" :key="item.id" class="q-mb-sm"
                                            clickable
                                            v-ripple>
                                        <q-item-section avatar>
                                            <q-avatar>
                                                <img :src="item.img">
                                            </q-avatar>
                                        </q-item-section>

                                        <q-item-section v-if="addTab === 'friend' ">
                                            <q-item-label>{{ item.name }}</q-item-label>
                                            <q-item-label caption lines="1" >账号:
                                                <span class="text-grey margin-left">{{ item.accountNum }}</span>
                                            </q-item-label>
                                        </q-item-section>
                                        <q-item-section v-else>
                                            <q-item-label>{{ item.groupName }}</q-item-label>
                                            <q-item-label caption lines="1"><q-icon name="group" size="18px"/>:{{ item.memberCount
                                                }}</q-item-label>
                                            <q-item-label caption lines="1">群号:{{ item.groupNum }}</q-item-label>
                                        </q-item-section>

                                        <q-item-section side @click="toShowAccountDetailFu">
                                            <q-icon name="add_circle" color="green"/>
                                        </q-item-section>
                                    </q-item>
                                </q-list>
                            </div>


                         </q-scroll-area>
                    </div>
                    <div v-if="errAccount" class="row justify-center">
                        <q-img :src="notFunImgStr"
                               style="height: 25vh; max-width: 20vw">
                            <div class="absolute-bottom text-center">
                                哦吼 ,查找为空。。
                            </div>
                        </q-img>
                    </div>
                </div>
            </div>
        </q-dialog>

    </div>

</template>

<script>
  import ProfileInfo from '../profile/indexTwo'

  export default {
    props: {
      // ...你自定义的属性
    },
    data () {
      return {
        notFunImgStr: require('../../statics/404.jpg'),
        showAccountDetail: true,
        showAccountList: false,
        addTab: 'friend',
        errAccount: false,
        accountNum: '',
        searchAccountImg: '',
        searchList: [
          {
            id: 1,
            img: 'https://cdn.quasar.dev/img/avatar2.jpg',
            name: '曾惠君',
            accountNum: '123213213213',
            groupName: 'J-IM 朋友圈',
            groupNum: '123213213213',
            memberCount:'22/200'
          },
          {
            id: 2,
            img: 'https://cdn.quasar.dev/img/avatar1.jpg',
            name: '徐建',
            accountNum: '123213213213',
            groupName: 'J-IM 朋友圈',
            groupNum: '123213213213',
            memberCount:'22/200'},
          {
            id: 1,
            img: 'https://cdn.quasar.dev/img/avatar2.jpg',
            name: '曾惠君',
            accountNum: '123213213213',
            groupName: 'J-IM 朋友圈',
            groupNum: '123213213213',
            memberCount:'22/200'
          },
          {
            id: 2,
            img: 'https://cdn.quasar.dev/img/avatar1.jpg',
            name: '徐建',
            accountNum: '123213213213',
            groupName: 'J-IM 朋友圈',
            groupNum: '123213213213',
            memberCount:'22/200'
          }, {
            id: 1,
            img: 'https://cdn.quasar.dev/img/avatar2.jpg',
            name: '曾惠君',
            accountNum: '123213213213',
            groupName: 'J-IM 朋友圈',
            groupNum: '123213213213',
            memberCount:'22/200'
          },
          {
            id: 2,
            img: 'https://cdn.quasar.dev/img/avatar1.jpg',
            name: '徐建',
            accountNum: '123213213213',
            groupName: 'J-IM 朋友圈',
            groupNum: '123213213213',
            memberCount:'22/200'
          }, {
            id: 1,
            img: 'https://cdn.quasar.dev/img/avatar2.jpg',
            name: '曾惠君',
            accountNum: '123213213213',
            groupName: 'J-IM 朋友圈',
            groupNum: '123213213213',
            memberCount:'22/200'
          },
          {
            id: 2,
            img: 'https://cdn.quasar.dev/img/avatar1.jpg',
            name: '徐建',
            accountNum: '123213213213',
            groupName: 'J-IM 朋友圈',
            groupNum: '123213213213',
            memberCount:'22/200'
          },
        ],
        userInfo:{
          remark:'I love reading, traveling and discovering new things. You need to be happy in life.',
          accountNum:'1221221',
          bgImg:'https://cdn.quasar.dev/img/mountains.jpg',
          phone:'（+86）12345678910',
          from:'江西 赣州',
          imgs:[
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'new',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'new',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            },
            {
              id:1,
              img:'https://cdn.quasar.dev/img/avatar.png',
              name:'',
              remark:'',
            }
          ],
        }
      }
    },
    methods: {
      initTab(){
        // eslint-disable-next-line no-debugger
        debugger
        this.showAccountList = false
        this.errAccount = false
        this.showAccountDetail = false

      },
      // 以下方法是必需的
      // (不要改变它的名称 --> "show")
      show () {
        this.$refs.dialog.show()
      },

      // 以下方法是必需的
      // (不要改变它的名称 --> "hide")
      hide () {
        this.$refs.dialog.hide()
      },
      toShowAccountDetailFu () {
        this.$q.dialog({
          component: ProfileInfo,
          // 如果要访问自定义组件中的
          // 路由管理器、Vuex存储等,
          // 则为可选：
          parent: this, // 成为该Vue节点的子元素
                        // （“this”指向您的Vue组件）
                        // （此属性在<1.1.0中称为“root”
                        //  仍然可以使用，但建议切换到
                        //  更合适的“parent”名称）
          // （上述“component”和“parent”属性除外）：

          userInfo:this.userInfo
          // ...更多属性...
        })
      },
      searchAccount () {
        if (this.accountNum === '1') {
          this.errAccount = true
          this.showAccountList = false
          this.searchAccountImg = ''
        } else {
          this.errAccount = false
          this.showAccountList = true
          this.showAccountDetail = true
          this.searchAccountImg = 'https://cdn.quasar.dev/img/avatar5.jpg'
        }


      },
      onDialogHide () {
        // QDialog发出“hide”事件时
        // 需要发出
        this.$emit('hide')
      },

      onOKClick () {
        // 按OK，在隐藏QDialog之前
        // 发出“ok”事件（带有可选的有效负载）
        // 是必需的
        this.$emit('ok')
        // 或带有有效负载：this.$emit('ok', { ... })

        // 然后隐藏对话框
        this.hide()
      },

      onCancelClick () {
        // 我们只需要隐藏对话框
        this.hide()
      }
    },
    computed: {
      thumbStyle () {
        return {
          right: '2px',
          borderRadius: '5px',
          backgroundColor: '#4caf50',
          width: '1px',
          opacity: 0.75
        }
      }
    }
  }
</script>
<style scoped>
    .profile-scroll-add {
        min-height: 30vh;
        width: 100%;
    }


    .q-dialog-plugin::-webkit-scrollbar { /*滚动条整体样式*/
        width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
    }

    .add-friend {
        /*min-height: 400px;*/
        min-height: 30vh;
        width: 350px;
    }

    .profile-head {
        height: 10%;
    }

    .profile-body {
        height: 90%;
        width: 100%;
    }
</style>

